import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Dimensions,
  FlatList,
  Text,
  TouchableOpacity,
  Image,
  TouchableWithoutFeedback,
  TextInput,
  Animated, PanResponder, UIManager, findNodeHandle,

} from 'react-native';
import { getPixel } from '../common/utils'
import DetailSwiper from './answerSwiper.js'
import { Actions } from 'react-native-router-flux';
import { observer, inject } from 'mobx-react';

@inject('store')
@observer
export default class App extends Component {
  pan7 = PanResponder.create({
    onMoveShouldSetPanResponder: (evt, gestureState) => {
      if (Math.abs(gestureState.dx) >= 1 && Math.abs(gestureState.dy) <= 3) {
        return true
      }
      return false
    },
    onPanResponderTerminate: (evt, gestureState) => {
      // 不切换
      // 还原
      Animated.timing(                  // 随时间变化而执行动画
        this.state.detailAnim,            // 动画中的变量值
        {
          toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
          duration: 0,              // 让动画持续一段时间
          useNativeDriver: true
        }
      ).start();
      Animated.timing(                  // 随时间变化而执行动画
        this.state.detailAnim,            // 动画中的变量值
        {
          toValue: 0,                   // 透明度最终变为1，即完全不透明
          duration: 300,              // 让动画持续一段时间
          useNativeDriver: true
        }
      ).start();
      if (this.state.whichBox == 1) {
        this._moveBox.setNativeProps({
          style: { height: this.state.firstHeight }
        })
      } else if (this.state.whichBox == 2) {
        this._moveBox.setNativeProps({
          style: { height: this.state.secHeight }
        })
      } else {
        this._moveBox.setNativeProps({
          style: { height: this.state.zeroHeight }
        })
      }
    },
    onPanResponderMove: (evt, gestureState) => {
      let temp1 = 0
      let temp2 = 0
      if (gestureState.dx > 0) {
        temp1 = gestureState.dx >= 100 ? 100 : gestureState.dx
      } else {
        temp2 = gestureState.dx <= -100 ? -100 : gestureState.dx
      }
      // 1板子在中间
      if (this.state.whichBox == 1) {
        if (gestureState.dx < 0) {
          // 左滑
          this._detailPlot1.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot2.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._moveBox.setNativeProps({
            style: { height: temp2 / 100 * (this.state.firstHeight - this.state.secHeight) + this.state.firstHeight }
          })
        } else {
          // 右滑
          this._detailPlot1.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot0.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._moveBox.setNativeProps({
            style: { height: -temp1 / 100 * (this.state.firstHeight - this.state.zeroHeight) + this.state.firstHeight }
          })
        }
      } else if (this.state.whichBox == 2) {
        // 第二个板子在中间
        if (gestureState.dx < 0) {
          // 左滑
          this._detailPlot2.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot0.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._moveBox.setNativeProps({
            style: { height: temp2 / 100 * (this.state.secHeight - this.state.zeroHeight) + this.state.secHeight }
          })
        } else {
          // 右滑
          this._detailPlot2.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot1.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._moveBox.setNativeProps({
            style: { height: -temp1 / 100 * (this.state.secHeight - this.state.firstHeight) + this.state.secHeight }
          })
        }
      } else {
        // 第0个板子在中间
        if (gestureState.dx < 0) {
          // 左滑
          this._detailPlot0.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot1.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._moveBox.setNativeProps({
            style: { height: temp2 / 100 * (this.state.zeroHeight - this.state.firstHeight) + this.state.zeroHeight }
          })
        } else {
          // 右滑
          this._detailPlot0.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._detailPlot2.setNativeProps({
            style: { translateX: gestureState.dx }
          })
          this._moveBox.setNativeProps({
            style: { height: -temp1 / 100 * (this.state.zeroHeight - this.state.secHeight) + this.state.zeroHeight }
          })
        }
      }
    },
    onPanResponderRelease: (evt, gestureState) => {
      if (gestureState.dx >= 100 || gestureState.dx <= -100) {
        // 确认切换
        if (gestureState.dx < 0) {
          // 往左滑
          if (this.state.whichBox == 1) {
            // 第一个板子 
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true
                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值
                  {
                    toValue: 0,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                this.setState({ zeroIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 2, index: (this.state.index + 1) % this.state.detailPlotNumber, answersIndex: (this.state.index + 1) % this.state.detailPlotNumber })
                this._detailPlot0.setNativeProps({
                  style: { left: this.state.width }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: -this.state.width }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: 0 }
                })
              });

            });

            this._moveBox.setNativeProps({
              style: { height: this.state.secHeight }
            })

          } else if (this.state.whichBox == 2) {
            // 第二个板子
            this._moveBox.setNativeProps({
              style: { height: this.state.zeroHeight }
            })
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true

                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值
                  {
                    toValue: 0,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                this.setState({ firstIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 0, index: (this.state.index + 1) % this.state.detailPlotNumber, answersIndex: (this.state.index + 1) % this.state.detailPlotNumber })
                this._detailPlot0.setNativeProps({
                  style: { left: 0, translateX: 0 }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: this.state.width }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: -this.state.width }
                })
              });

            });
          } else {
            // 第0个板子         
            this._moveBox.setNativeProps({
              style: { height: this.state.firstHeight }
            })
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true
                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值
                  {
                    toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                this.setState({ secIndex: (this.state.index + 2) % this.state.detailPlotNumber, whichBox: 1, index: (this.state.index + 1) % this.state.detailPlotNumber, answersIndex: (this.state.index + 1) % this.state.detailPlotNumber })

                this._detailPlot0.setNativeProps({
                  style: { left: -this.state.width, translateX: 0 }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: 0, translateX: 0 }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: this.state.width, translateX: 0 }
                })
              });

            });

          }
        } else {
          // 往右滑
          if (this.state.whichBox == 1) {
            // 第一个板子
            this._moveBox.setNativeProps({
              style: { height: this.state.zeroHeight }
            })
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true

                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值
                  {
                    toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                this.setState({ secIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 0, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, answersIndex: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber })

                this._detailPlot0.setNativeProps({
                  style: { left: 0, translateX: 0 }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: this.state.width, translateX: 0 }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: -this.state.width, translateX: 0 }
                })
              });
            });


          } else if (this.state.whichBox == 2) {
            // 第二个板子
            this._moveBox.setNativeProps({
              style: { height: this.state.firstHeight }
            })
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true

                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值
                  {
                    toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                this.setState({ zeroIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 1, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, answersIndex: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber })

                this._detailPlot0.setNativeProps({
                  style: { left: -this.state.width, translateX: 0 }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: 0, translateX: 0 }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: this.state.width, translateX: 0 }
                })
              });
            });
          } else {
            // 第0个板子
            this._moveBox.setNativeProps({
              style: { height: this.state.secHeight }
            })
            Animated.timing(                  // 随时间变化而执行动画
              this.state.detailAnim,            // 动画中的变量值
              {
                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                duration: 0,              // 让动画持续一段时间
                useNativeDriver: true
              }
            ).start(() => {
              Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                  toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                  duration: 300,              // 让动画持续一段时间
                  useNativeDriver: true
                }
              ).start(() => {
                Animated.timing(                  // 随时间变化而执行动画
                  this.state.detailAnim,            // 动画中的变量值
                  {
                    toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                  }
                ).start();
                this.setState({ firstIndex: ((this.state.index - 2) + this.state.detailPlotNumber) % this.state.detailPlotNumber, whichBox: 2, index: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber, answersIndex: (this.state.index - 1 + this.state.detailPlotNumber) % this.state.detailPlotNumber })

                this._detailPlot0.setNativeProps({
                  style: { left: this.state.width, translateX: 0 }
                })
                this._detailPlot1.setNativeProps({
                  style: { left: -this.state.width, translateX: 0 }
                })
                this._detailPlot2.setNativeProps({
                  style: { left: 0, translateX: 0 }
                })
              });
            });
          }
        }
      } else {
        // 不切换
        // 还原
        Animated.timing(                  // 随时间变化而执行动画
          this.state.detailAnim,            // 动画中的变量值
          {
            toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
            duration: 0,              // 让动画持续一段时间
            useNativeDriver: true
          }
        ).start(() => {
          Animated.timing(                  // 随时间变化而执行动画
            this.state.detailAnim,            // 动画中的变量值
            {
              toValue: 0,                   // 透明度最终变为1，即完全不透明
              duration: 300,              // 让动画持续一段时间
              useNativeDriver: true
            }
          ).start();
        });

        if (this.state.whichBox == 1) {
          this._moveBox.setNativeProps({
            style: { height: this.state.firstHeight }
          })
        } else if (this.state.whichBox == 2) {
          this._moveBox.setNativeProps({
            style: { height: this.state.secHeight }
          })
        } else {
          this._moveBox.setNativeProps({
            style: { height: this.state.zeroHeight }
          })
        }
      }
    }
  })

  state = {
    width: Dimensions.get('window').width,
    detailPlotNumber: 3,
    detailPlots: [
      { core: '这是第一步的核思', step: '这是第一步步骤' },
      { core: '这是第二步的核思', step: '这是第二步步骤' },
      { core: '这是第三步的核思', step: '这是第三步步骤' },
    ],
    comments: [
      [],
      [],
      [],
      // [
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'nixixi', praiseNumber: 0, commentNumber: 0 },
      // ],
      // [
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'gigigigi', praiseNumber: 0, commentNumber: 0 },
      // ],
      // [
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      //   { name: '曹家富', id: 13124324, userId: '3023704769', content: 'hhha', praiseNumber: 0, commentNumber: 0 },
      // ],
    ],
    praised: [
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
    ],
    Mycomment: '',
    // 回答板块的index
    answersIndex: 0,

    // 集数 从0开始
    index: 0,
    whichBox: 1,
    // 三个班子对应的高度
    zeroHeight: 0,
    firstHeight: 0,
    secHeight: 0,
    // 剧情板子对应的index
    zeroIndex: 2,
    firstIndex: 0,
    secIndex: 1,

    // 动画参数
    detailAnim: new Animated.Value(0),

    // 第一个剧情板子第一次设置moveBox高度
    isFirstRefresh: false
  }

  componentWillMount = async () => {
    await fetch(`${this.props.store.ip}/getComment?answerId=${this.props.answer.id}&page=0&step=${this.props.answer.contents.length}`)
      // 将数据转化成为json格式 反序列化
      .then((response) => response.json())
      .then((respenseJson) => {
        var len1 = this.props.answer.contents.length < 3 ? 3 : this.props.answer.contents.length
        var len = 3 - this.props.answer.contents.length
        for (let index = 0; index < len; index++) {
          this.props.answer.contents.push(
            { core: '这是下一步的核思', step: '这是下一步步骤' },
          )
        }
        var len2 = respenseJson.length
        for (let tem = 0; tem < len1 - len2; tem++) {
          respenseJson.push([])
        }
        console.log(respenseJson)

        this.setState({ detailPlots: this.props.answer.contents, detailPlotNumber: len1, comments: respenseJson, isFirstRefresh: true })
      })
      .catch((error) => {
        console.error(error);
      });

  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.detailPlots !== nextState.detailPlots) {
      return true
    }
    if (this.state.answersIndex !== nextState.answersIndex) {
      return true
    }
    if (this.state.Mycomment !== nextState.Mycomment) {
      return true
    }
    if (this.state.comments !== nextState.comments) {
      return true
    }
    if (this.state.praised !== nextState.praised) {
      return true
    }
    if (this.state.zeroIndex !== nextState.zeroIndex) {
      return true
    }
    if (this.state.firstIndex !== nextState.firstIndex) {
      return true
    }
    if (this.state.secIndex !== nextState.secIndex) {
      return true
    }
    return false;
  }

  insertComment = () => {
    if (this.state.Mycomment === '') {
      alert('你还没输入评论')
    } else {
      var url = `${this.props.store.ip}/insertComment`
      var config = {
        method: 'POST',
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        body: "answerId=" + this.props.answer.id + "&contents=" + this.state.Mycomment + "&userId=" + this.props.store.account.userId + "&step=" + this.state.index + "&name=" + this.props.store.account.name
      }
      // console.log(config.body)
      fetch(url, config).then((response) => response.json())
      this.state.comments[this.state.index].unshift(
        { name: this.props.store.account.name, id: this.props.answer.id, userId: this.props.store.account.userId, contents: this.state.Mycomment, praiseNumber: 0, commentNumber: 0 },
      )
    }
  }


  render() {

    return (
      <View {...this.pan7.panHandlers} style={{ flex: 1, alignItems: 'center', paddingHorizontal: getPixel(4), }}>

        <View style={{ width: '100%', height: getPixel(10) }}></View>
        <Animated.View key='detailSwiper' style={{ width: '100%' }}>
          <Animated.View ref={ref => this._moveBox = ref} style={{ width: '100%', position: 'relative' }}>

            {/* 剧情第0个板子 */}
            <Animated.View ref={ref => this._detailPlot0 = ref} style={{ paddingHorizontal: getPixel(10), borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: 10, width: '100%', backgroundColor: '#FFD39B', position: 'absolute', left: -this.state.width }} onLayout={() => {
              let handle0 = findNodeHandle(this._detailPlot0);
              UIManager.measure(handle0, (x, y, width, height, pageX, pageY) => {
                this.setState({ zeroHeight: height })
              })
            }} >
              <Text style={{ fontSize: 16,textAlign:'center' }}>{`第${this.state.zeroIndex + 1}步`}</Text>
              <Text style={{ fontSize: 16 }}>{this.state.detailPlots[this.state.zeroIndex].core}</Text>
              <Text style={{ fontSize: 16 }}>{this.state.detailPlots[this.state.zeroIndex].step}</Text>
            </Animated.View>

            {/* 剧情第一个板子 */}
            <Animated.View ref={ref => this._detailPlot1 = ref} style={{ paddingHorizontal: getPixel(10), borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: 10, width: '100%', backgroundColor: '#FFD39B', left: 0 }} onLayout={() => {
              let handle = findNodeHandle(this._detailPlot1);
              UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
                if (this.state.isFirstRefresh) {
                  this._moveBox.setNativeProps({
                    style: { height: height }
                  })
                  this._detailPlot1.setNativeProps({ style: { position: 'absolute' } })
                  this.setState({ isFirstRefresh: false, firstHeight: height })
                } else {
                  this.setState({ firstHeight: height })
                }
              })
            }} >
              <Text style={{ fontSize: 16,textAlign:'center' }}>{`第${this.state.firstIndex + 1}步`}</Text>
              <Text style={{ fontSize: 16 }}>{this.state.detailPlots[this.state.firstIndex].core}</Text>
              <Text style={{ fontSize: 16 }}>{this.state.detailPlots[this.state.firstIndex].step}</Text>
            </Animated.View>

            {/* 剧情第二个板子 */}
            <Animated.View ref={ref => this._detailPlot2 = ref} style={{ paddingHorizontal: getPixel(10), borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: 10, width: '100%', backgroundColor: '#FFD39B', position: 'absolute', left: this.state.width }} onLayout={() => {
              let handle2 = findNodeHandle(this._detailPlot2);
              UIManager.measure(handle2, (x, y, width, height, pageX, pageY) => {
                this.setState({ secHeight: height })
              })
            }}>
              <Text style={{ fontSize: 16,textAlign:'center' }}>{`第${this.state.secIndex + 1}步`}</Text>
              <Text style={{ fontSize: 16 }}>{this.state.detailPlots[this.state.secIndex].core}</Text>
              <Text style={{ fontSize: 16 }}>{this.state.detailPlots[this.state.secIndex].step}</Text>
            </Animated.View>
          </Animated.View >

        </Animated.View>

        {/* <DetailSwiper detailPlotNumber={this.state.detailPlotNumber} detailPlots={this.state.detailPlots} /> */}
        <FlatList
          showsVerticalScrollIndicator={false}
          style={{ flex: 1, width: '100%' }}
          data={this.state.comments[this.state.index]}
          renderItem={({ item, index }) =>
            <TouchableWithoutFeedback onPress={() => {
              Actions.comments({ comment: item })
            }}>
              <View key={index} style={{ marginHorizontal: getPixel(4), flexDirection: 'column', backgroundColor: 'white', marginTop: getPixel(10), borderRadius: getPixel(8), paddingVertical: getPixel(10), paddingHorizontal: getPixel(10), shadowOffset: { width: 10, height: 10 }, shadowOpacity: 0.3, elevation: 10 }}>

                <Text style={{ color: '#333333', fontSize: getPixel(15), fontWeight: 'bold' }}>{item.name}</Text>

                <Text numberOfLines={3} style={{ fontSize: getPixel(15) }}>
                  {item.contents}
                </Text>

                <View style={{ alignItems: 'center', justifyContent: 'flex-end', flexDirection: 'row' }}>

                  <TouchableOpacity onPress={() => {
                    if (this.state.praised[index]) {
                      this.state.comments[index].praiseNumber = this.state.comments[index].praiseNumber - 1
                    } else {
                      this.state.comments[index].praiseNumber = this.state.comments[index].praiseNumber + 1
                    }
                    this.state.praised[index] = !this.state.praised[index]
                    this.setState({ praised: [...this.state.praised] })
                  }}>
                    <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                      {this.state.praised[index] ?
                        <Image style={{ width: getPixel(20), height: getPixel(20) }} source={require('../../assets/images/praised.png')} /> :
                        <Image style={{ width: getPixel(20), height: getPixel(20) }} source={require('../../assets/images/praise.png')} />
                      }
                      <Text style={{ marginLeft: getPixel(5) }}>{item.priaseNumber}</Text>
                    </View>
                  </TouchableOpacity>

                  <TouchableOpacity onPress={() => {
                    this.setState({ praised: !this.state.praised })
                  }}>
                    <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: getPixel(5) }}>

                      <Image style={{ width: getPixel(20), height: getPixel(20), marginLeft: getPixel(10) }} source={require('../../assets/images/comments.png')} />
                      <Text style={{ marginLeft: getPixel(5) }}>{item.commentNumber}</Text>
                    </View>
                  </TouchableOpacity>

                </View>
              </View>
            </TouchableWithoutFeedback>
          }
        />
        <View style={{ width: '100%', backgroundColor: 'white', paddingHorizontal: getPixel(4) }}>
          <TextInput
            ref={ref => this._textInput = ref}
            placeholder='请输入你的评论'
            multiline={true}
            style={{ paddingHorizontal: getPixel(8), paddingVertical: getPixel(0), width: '100%', borderWidth: getPixel(2), borderColor: '#ccc', borderRadius: getPixel(20), fontSize: getPixel(14), }}
            value={this.state.Mycomment}
            onChangeText={(text) => {
              this.setState({ Mycomment: text })
            }}
            onSubmitEditing={() => {
              this.insertComment()
              // this.setState({ Mycomment: '' })
              this._textInput.clear()
              this._textInput.blur();
            }}
          />
        </View>
      </View >
    );
  }
}

const styles = StyleSheet.create({
  text: {
    marginLeft: 15,
    padding: 5,
    fontSize: 20,
  }
})
